<template>
  <div class="wrapper">
    <search-form :type="'ZCGL'" @handleAdd="handleAdd" @search="search" @handleDel="handleDel"> </search-form>
    <a-card :body-style="{ padding: 0 }" :bordered="false">
      <a-spin :indicator="indicator" :spinning="spinning" tip="获取数据中...">
        <div class="spin-content">
          <a-table size="small" bordered :rowKey="record => record.id" :columns="columns" :dataSource="data" :pagination="pagination" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :rowClassName="setRowClassName">
            <span slot="action" slot-scope="text, record">
              <template>
                <a type="link" @click="handleEdit(record)">修改</a>
                <a-divider type="vertical" />
                <a size="small" type="link" @click="handleView(record)">查看</a>
              </template>
            </span>
            <!-- <template slot="Persons" slot-scope="text, record">
              <span :title="record.Persons" :style="rowStyle">{{ record.Persons }}</span>
            </template> -->
          </a-table>
        </div>
      </a-spin>
    </a-card>
    <info-modal :actionType="action" ref="infomodal" @save="handleSave"></info-modal>
  </div>
</template>

<script>
import { trackSave, trackList, trackInfo, trackDel } from '@/api/track'
import { studentInfo } from '@/api/students'
import SearchForm from '@/views/StudentsInfo/modules/searchform'
import InfoModal from './modules/infomodal_track'
import { mapActions, mapGetters } from 'vuex'
import { tranDate } from '@/utils/util'
export default {
  components: { SearchForm, InfoModal },
  props: {},
  data() {
    return {
      action: 'add',
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      rowStyle: 'overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;',
      spinning: false,
      data: [],
      form: this.$form.createForm(this),
      queryParam: {
        index: 1,
        pageSize: 10
      },
      columns: [
        {
          title: '学生',
          dataIndex: 'Name',
          key: 'Name',
          align: 'center'
        },
        {
          title: '身份证',
          dataIndex: 'IDNumber',
          key: 'IDNumber',
          align: 'center'
        },
        {
          title: '时间',
          dataIndex: 'time',
          key: 'time',
          align: 'center'
        },
        {
          title: '所在单位',
          dataIndex: 'companyName',
          key: 'companyName',
          align: 'center'
        },
        {
          title: '操作',
          width: '100px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 100,
          align: 'center'
        }
      ],
      selectedRowKeys: [],
      pagination: {
        onChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        current: 1,
        total: 0,
        showQuickJumper: true,
        size: 'small',
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onShowSizeChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        position: 'bottom'
      }
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    initData(data) {
      this.spinning = true
      trackList(data)
        .then(res => {
          let data = res.data
          data.map(a => {
            a.time = tranDate(a.time)
          })
          this.pagination.total = res.page.RecordCount
          setTimeout(() => {
            this.data = data
          }, 500)
        })
        .finally(() => {
          this.spinning = false
        })
    },
    search(data) {
      Object.assign(this.queryParam, data, { index: 1 })
      this.pagination.current = 1
      this.initData(this.queryParam)
    },
    handleAdd() {
      this.action = 'add'
      this.$refs.infomodal.add()
    },
    handleSave(data, id) {
      this.action === 'edit' ? Object.assign(data, { id: id }) : null
      trackSave(data).then(res => {
        this.initData(this.queryParam)
      })
    },
    handleEdit(data) {
      this.spinning = true
      this.action = 'edit'
      trackInfo({ id: data.id })
        .then(res => {
          let value = res.data
          studentInfo({ id: value.studentID }).then(res1 => {
            value.studentInfo = res1.data.StudentInfo
            this.$refs.infomodal.edit(value)
          })
        })
        .finally(() => {
          this.spinning = false
        })
    },
    handleDel() {
      this.spinning = true
      trackDel(this.selectedRowKeys).then(res => {
        this.initData(this.queryParam)
        this.selectedRowKeys = []
      })
    },
    handleView(data) {
      this.spinning = true
      this.action = 'view'
      trackInfo({ id: data.id })
        .then(res => {
          let value = res.data
          studentInfo({ id: value.studentID }).then(res1 => {
            value.studentInfo = res1.data.StudentInfo
            this.$refs.infomodal.view(value)
          })
        })
        .finally(() => {
          this.spinning = false
        })
    },
    exportXls(data) {},
    setRowClassName(record, idx) {
      return idx % 2 == 1 ? 'bg-zebra-pattern' : ''
    },
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    pageOnChange(index, pageSize) {
      this.spinning = true
      Object.assign(this.pagination, {
        current: index,
        pageSize,
        index
      })
      Object.assign(this.queryParam, {
        pageSize,
        index
      })
      this.initData(this.queryParam)
    }
  },
  created() {
    this.initData(this.queryParam)
  },
  mounted() {}
}
</script>
<style lang="less" scoped></style>
